{% extends 'admin/layout/base.html.twig' %}

{% block stylecontent %}
    <style type="text/css" media="screen">
        
    </style>
{% endblock %}

{% block content %}

<div class="main" style="height:100%;">
    <!-- MAIN CONTENT -->
    <div class="main-content" style="height:100%;">
        <div class="container-fluid" style="height:100%;">
            <!-- OVERVIEW -->
            <div class="row" style="height:100%;">
                <!-- left content -->   
                <div class="col-md-3" style="overflow-y:auto; height:100%;">
                    <div class="">
                        <h3 class="page-title" style="float:left;">网站配置
                        </h3>
                        <a style="float:right;" class="btn btn-primary" id="submit-btn" onclick="formSubmit()">Submit</a>
                        <div class="scrollmargin" style="height:10px;clear:both;"></div>
                    </div>
                    <!-- page info -->
                    <div class="panel panel-headline">
                        <div class="panel-heading">
                            <h4 class="panel-title">基本信息</h4>
                        </div>
                        <div class="panel-body">
                            <div class="alert alert-danger alert-dismissible alert-window" style="display:none;" role="alert">
                                <button type="button" class="close alert-close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <i class="fa fa-times-circle"></i> <span class="warner-msg">Your account has been suspended</span>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">网站名</span>
                                <input value="{{page?page.name:''}}" class="form-control input-title" placeholder="网站名" name="name" type="text">
                                <input value="{{page?page.id:''}}" class="form-control input-id"  name="id" type="hidden">
                            </div><br>
                            <div class="input-group">
                                <span class="input-group-addon">文章底图</span>
                                <input value="{{page?page.picurl:''}}" class="form-control input-picurl" placeholder="文章底图"  name="picurl" type="text">
                            </div><br>
                            <div class="input-group">
                                <span class="input-group-addon">logo</span>
                                <input value="{{page?page.logo:''}}" class="form-control input-logo" placeholder="logo"  name="sort" type="text">
                            </div><br>
                        </div>
                    </div>

                    <!-- images -->
                    <div class="panel panel-headline">
                        <div class="panel-heading">
                            <h4 class="panel-title" style="float:left;">图片管理</h4>
                            <a style="float:right;" class="btn btn-primary" id="filePicker"><i class="fa fa-plus-square"></i>&nbsp;选择图片</a>
                            <div class="scrollmargin" style="height:10px;clear:both;"></div>
                        </div>
                        <div class="panel-body">
                            <div class="image-list" id="uploader">
                                {% for image in images %}
                                    {% if image %}
                                        <div class="alert alert-info alert-dismissible" role="alert">
                                            <button type="button" class="close delete-image"><span aria-hidden="true">&times;</span></button>
                                            <img class="image-manage" src="{{image}}"/>
                                            <div class="img-info">
                                                <p>Path: {{image}}</p>
                                                <input class="images" type="hidden" value='{{image}}' name="images" />
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <a class="btn btn-primary" id="upBtn">Upload</a>
                        </div>
                        
                    </div>
                </div>
                <!-- right content --> 
                <div class="col-md-9" style="overflow-y:auto; height:100%;">
                    <div id="sellInfo1" class="panel panel-headline pc-code">
                        <div class="panel-heading">
                            <h3 class="panel-title">其他</h3>
                        </div>
                        <div class="panel-body">
                            <div class="input-group">
                                <span class="input-group-addon">客服链接</span>
                                <input value="{{page?page.customLink:''}}" class="form-control input-custom" placeholder="客服链接" name="custom_link" type="text">
                            </div><br>
                            <h3 class="panel-title">公用js</h3><br>
                            <textarea class="form-control input-js" placeholder="公用js" rows="4">{{page?page.commonJs:''}}</textarea>
                            <br>
                           <h3 class="panel-title">关键词</h3><br>
                            <textarea class="form-control input-keywords" placeholder="关键词" rows="4">{{page?page.keywords:''}}</textarea>
                            <br>
                            <h3 class="panel-title">描述</h3><br>
                            <textarea class="form-control input-description" placeholder="描述" rows="4">{{page?page.description:''}}</textarea>
                            <br>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!-- END OVERVIEW -->
        </div>
    </div>
    <!-- END MAIN CONTENT -->
</div>
   
{% endblock %}

{% block jscript %}
<script type="text/javascript" src="/admin/scripts/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript">
	var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: false,

        // swf文件路径
        swf: '/admin/scripts/webuploader-0.1.5/js/Uploader.swf',

        // 文件接收服务端。
        server: '{{path("admin_upload")}}',

        // 选择文件的按钮。可选。
        pick: '#filePicker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png,svg',
            mimeTypes: 'image/*'
        }
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        console.log(file);
        var $li =  $('<div id="' + file.id + '" class="alert alert-info alert-dismissible" role="alert">' +
                        '<button type="button" class="close delete-image"><span aria-hidden="true">&times;</span></button>'+
                        '<img class="image-manage" src="/admin/img/apple-icon.png"/>' +
                        '<div class="img-info">'+
                            '<p>Name: ' + file.name + '</p>' +
                            '<p>Size: ' + file.size + 'kb </p>' +
                            '<div class="progress">' +
                                '<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">' +
                                    '<span class="sr-only">0% Complete</span>' +
                                '</div>' +
                                '<div class="error"></div>' +
                            '</div>' +
                            '<input class="images" type="hidden" value="" name="images[]" />' +
                        '</div>' +
                    '</div>'),
            $img = $li.find('img');
        $("#uploader").append($li);
        // 创建缩略图
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith("<span>can't preview</span>");
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100 );
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        console.log(percentage);
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress div');
        var percentvalue = percentage * 100;
        $percent.css( 'width', percentvalue + '%' );
        $percent.attr( 'aria-valuenow', percentvalue);
        $percent.find('span').html(percentvalue + '% Complete');
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file , res) {
        console.log(res);
        var $li = $( '#'+file.id ),
            $success = $li.find('div.progress');
        if(res.errno==0){
            $success.before('<p style="word-wrap: break-word;">Path:<br>'+ res.path +'</p>');
            $success.remove();
            $li.find('.images').attr('value',res.path);
        } else {
            $success.html('<span class="label label-danger">upload failed</span>');
        }
    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.progress');

        $error.html('<span class="label label-danger">upload failed</span>');
    });
    //start upload
    $("#upBtn").click(function(){
        uploader.upload();
    })
    $("body").on('click','.delete-image',function(){
        var _this = $(this),
         path = _this.parent().find('.images').val();
        console.log(path);
        layer.confirm('Delete anyway?', {
            title:"Note",
            btn: ['Sure','Cancel'] //按钮
            }, function(){
                var index = layer.load(1, {
                 shade: [0.1,'#fff'] 
                });
                $.post("{{path('admin_delete_file')}}",{file:path},function(result){
                    layer.close(index);
                    layer.msg('Success !', {icon: 1});
                    _this.parent().remove();
                });
            });
    })
    //close warning alert window 
    $(".alert-close").click(function(){
        $(this).parent().hide();
    })
    //alert warning window
    function alertWarning(msg){
        $(".warner-msg").text(msg);
        $(".alert-window").show();
    }

    //form submit handle
    function formSubmit(){
        var title = $(".input-title").val();
        if(!title){
            alertWarning("The title is required!");
            return false;
        }
        var logo = $(".input-logo").val();
        if(!logo){
            alertWarning("The logo is required!");
            return false;
        }
        $(".alert-window").hide();
        var logo = $(".input-logo").val(),
            picurl = $(".input-picurl").val(),
            custom = $(".input-custom").val(),
            commonjs = $(".input-js").val(),
            keywords = $(".input-keywords").val(),
            description = $(".input-description").val();

        //submit
        $.ajax({
            url: "{{path('storeConfig')}}",
            type: 'POST',
            dataType: 'json',
            data: {
                title:title,
                logo:logo,
                custom:custom,
                commonjs:commonjs,
                keywords:keywords,
                description:description,
                picurl:picurl
            },
            success: function(res){
                console.log(res);
                if(res.errno==0){
                    layer.msg('Success');
                    setTimeout("location.href='{{path("admin_dashboard")}}';",1000);  
                } else {
                    layer.msg('错误，请核实表单！');
                }
            },
            error: function(){
                
            }
        })
    }


</script>
	

{% endblock %}

